<template>
    <div class='nav'>
      <li>
        <slot name="left"></slot>
        <span class="iconfont icon-down"></span>
      </li>
      <li>
        <slot name="center"></slot>
        <span class="iconfont icon-down"></span>
      </li>
      <li>
        <slot name="right"></slot>
        <span class="iconfont icon-down"></span>
      </li>
      <li><p class="iconfont icon-search search"></p></li>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {},
    components:{}
};
</script>

<style lang='scss' scoped>
.nav {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  border-top: 1px solid #f4f4f4;
  text-align: right;

  li {
    // flex-basis: 25%;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
     color: #999;
     font-size: 18px;
     margin-left: 10px;
    }
    .search {
        font-size: 30px;
        font-weight: 700;
        color: #39c894;
    }
  }
}
</style>
